

<!-- 图片轮播  大 -->
<!-- <xmp type="tag" name="pic_wall">
    <div class="_pic_wall">
       
        <div class="imgbox">
        {{#each ${pic} }}
            <img class="imgitem" bind-src="{{src}}" />
        {{/each}}
        </div>

     
    </div>
    <script type="text/vm">
    function (vm) {
        var imgbox=vm.queryElement({
            className:'imgbox'
        })[0];
       
        require(['jQuery'],function(){
            var imgs=$(imgbox).find('.imgitem');
            var len=$(imgs).length;
          
            var i=1;
            var t=setInterval(function(){
                $(imgbox).stop().animate({
                    right:1024*(i%len)
                },2000);
                i+=1;
            },5000);
          
        });
    }
    </script>
</xmp> -->

<xmp type="tag" name="pic_wall">
    <div class="_pic_wall">
    
        <div class="imgbox">
            {{#each ${array-data-key} }}
            <div style="z-index:{{$Parent.length-$Index}};position:absolute;" class="pic">
                <a target="_blank" bind-href="{{href||'javascript:void 0'}}">
                    <img style="width:100%;" bind-src="{{img_url}}" bind-title="{{title}}" />
                </a>
            </div>
            {{/each}}
        </div>

       
    </div>
 
    <script type="text/vm">
        function (vm) { require(["jQuery"], function($) { var current_pic; setInterval(function _a(){ var pics = $(".pic"); current_pic||(current_pic = pics.first()); pics.fadeOut(800); current_pic.stop().fadeIn(800); current_pic = current_pic.next(); if (current_pic.length==0) { current_pic = null; } return _a; }(),5000); }); }
    </script>
</xmp>

<!-- 单个商品 -->
<xmp type="tag" name="goodsitem">
    <div class="goodsitem">
        <div class="goodsimg">
            <a href="${href}" target="_blank">
                <img class="img" src="${src}" />
            </a>
        </div>
        <div class="detail">
            <div class="item first">
                <a href="${href}" target="_blank">
                    <span title="${goodsname}" class="goodsname">${goodsname}</span>
                </a>
            </div>
            <div class="item">
                <span class="price">$${price}</span>
            </div>
            <div class="item">
                <button class="icon-in" event-lclick="{{'$Top.$Event.goods_list.add_to_cart'}}">加入购物车</button>
            </div>
            <div class="item last">
                <span title="${decoration}" class="decoration">${decoration}</span>
            </div>
        </div>
    </div>
</xmp>



<!-- 分页控件 -->
<xmp type="tag" name="pagination">
    <div id="${id}" class="${class}">
        <div jsouper-p-num="{{${page-info}.num}}" event-click="{{'$Top.$Event.__common__.pre_page'}}" class="pre-page {{${page-info}.page==0&&'disabled'}}">&lt;</div>
        <div class="pages">
            {{#each ${page-info}._number_list}}
            <div jsouper-p-num="{{$Caller.${page-info}.num}}" jsouper-p-page="{{$Index}}" event-click="{{'$Top.$Event.__common__.change_page'}}" class="page {{${page-info}.page==$Index&&'current_page'}}">{{$Index+1}}</div>
            {{/each}}
        </div>
        <div jsouper-p-num="{{${page-info}.num}}" event-click="{{'$Top.$Event.__common__.next_page'}}" class="next-page {{${page-info}.page+1>=${page-info}.total_page&&'disabled'}}">&gt;</div>
    </div>
</xmp>

<!-- 新版本分页控件 -->
<xmp type="tag" name="pagination">
    <div id="${id}" class="${class}">
        <!-- <span>页码：</span> -->

        {{#if ${page-info}.page!=0}}
        <div jsouper-p-num="{{${page-info}.num}}" event-click="{{'$Top.$Event.__common__.pre_page'}}" class="pagenum focus" title="前一页" >◀</div>
        {{/if}}

        {{#each ${page-info}._number_list}}
            {{#if $Index==$Top.${page-info}.page}}
            [当前页：{{~~$Index+1}}]
            {{#else}}
            <div class="pagenum" jsouper-p-num="{{$Caller.${page-info}.num}}" jsouper-p-page="{{$Index}}" event-click="{{'$Top.$Event.__common__.change_page'}}">
            <span>{{~~$Index+1}}</span>
            </div>
            {{/if}}
        {{/each}}
        {{#if ${page-info}.page+1 < ${page-info}._number_list.length}}
        <div jsouper-p-num="{{${page-info}.num}}" event-click="{{'$Top.$Event.__common__.next_page'}}" class="pagenum"  title="后一页">▶</div>
        {{/if}}
        
    </div>
</xmp>

<xmp type="template" name="comments">
    {{#each $This}}
    <div class="comment">
        <div class="content">
            <b>评论内容：</b>{{content}}
        </div>
        <div class="commenter">
            <b>评论者：</b>{{commenter_info.name}}
        </div>
        <!--  <div class="reply">
            <input type="text" class="android" bind-input="{{'_reply_content'}}" value="{{_reply_content}}">
            <button event-click="{{'$Top.$Event.comment.reply'}}">回复</button>
        </div> -->
        {{#if comments.length}}
        <div class="comments">
            {{#> "comments","comments",comments.length}}
        </div>
        {{/if}}
    </div>
    {{/each}}
</xmp>


<xmp type="tag" name="img-uploader">
    <form style="${style}" id="${id}" class="img-uploader-wrap ${class}" action="${upload-server-url}?cb_hash={{$Private.$Cache.upload_hash}}" target="{{$Private.$Cache.upload_hash}}" enctype="multipart/form-data" method="post" img-input-key="${bind-input-key}" upload-status="${bind-status}" one-way="${one-way}" www='{{$Private.$Observer.img_width}}'>
        {{#if ${bind-input-key}&&$Private.$Observer.img_width }}
        <div event-mouseenter="{{'$Private.$Event.show_mark'}}" event-mouseleave="{{'$Private.$Event.hide_mark'}}">
            <img class="upload-img-preview" bind-src="{{${bind-input-key}}}?imageView/1/w/{{$Private.$Cache.img_width||1}}/h/{{$Private.$Cache.img_height||1}}" />
            <div class="img-mark">
                <div class="button-item" event-click="{{'$Private.$Event.remove'}}" event-click-onremove="${onremove}">移除</div>
            </div>
        </div>
        {{#else}} {{#if $Private.$Cache.uploading}}
        <div class="upload-loding">上传中</div>
        {{#else}}
        <div class="click-to-add">
            <input name="up" type="file" event-change-upload="{{'$Private.$Event.upload_img'}}" />
            <span class="icon">+</span>
            <p class="value">${text}</p>
        </div>
        {{/if}} {{/if}}
    </form>
    <iframe id="{{$Private.$Cache.upload_hash}}" name="{{$Private.$Cache.upload_hash}}" event-load-showImage="{{'$Private.$Event.show_image'}}" style="display:none;"></iframe>
    <!-- event-load-cb="${upload-callback}" -->
    <script type="text/vm">
        function (vm) { var formNode = vm.queryElement({ tagName:"FORM" })[0]; var iframeNode = vm.queryElement({ tagName:"IFRAME" })[0]; var inputNode = vm.queryElement({ tagName:"INPUT" })[0]; var markNode = vm.queryElement({ className:"img-mark" })[0]; var _action; var _upload_result_hash = Math.random().toString(16).substr(2)+(+new Date).toString(16); vm.set("$Private.$Cache.upload_hash", _upload_result_hash); function _set_status (value) { var _upload_status = "${bind-status}"; _upload_status&&vm.set(_upload_status,value); console.log("$Private.$Cache.uploading",value); vm.set("$Private.$Cache.uploading",value); } function _set_url (url,is_two_way) { // vm.set("$Private.$Cache.show_image",!!url); if (!formNode.clientWidth) { var self = this; var args = arguments; var _ti = setInterval(function () { if (formNode.clientWidth) { _set_url.apply(self, args) clearInterval(_ti); } },200); return; } if (is_two_way) { url = vm.get("${bind-input-key}"); } // console.log("url:",url,formNode.clientWidth); vm.set("${bind-input-key}",url); if (!formNode.getAttribute("one-way")) { vm.set("$Private.$Cache.img_width",formNode.clientWidth); vm.set("$Private.$Cache.img_height",formNode.clientHeight); } // IE 会因此触发onchange，所以默认不变 // inputNode.value = ""; } vm.set("$Private.$Observer.img_width",Model.Observer(function () { var one_way = !!formNode.getAttribute("one-way") return one_way?false:true; })); vm.model.onfollow = function () { // console.log("one-way:",!!formNode.getAttribute("one-way"),vm.get("${bind-input-key}")); if (!formNode.getAttribute("one-way")) { _set_url(null,true); } vm.get("$Private.$Observer.img_width"); } vm.set("$Private.$Event.upload_img",function () { formNode.submit();//先提交，否则$Private.$Cache.uploading 为 true后就无法获取file对象 _set_status(true); }); vm.set("$Private.$Event.show_image",function () { if (!vm.get("$Private.$Cache.uploading") ){ return } require(["coAjax"],function (coAjax) { coAjax.get(appConfig.other.get_upload_callback+_upload_result_hash,function (result) { _set_status(false); var img_url = appConfig.img_server_url+result.result.up.key; _set_url(img_url); if ("${upload-callback}") { var _cb = App.get("${upload-callback}"); (_cb instanceof Function)&&_cb(img_url); } },function (errorCode,xhr,errorMsg) { _set_status(false); alert("error",errorMsg); }); }); }); vm.set("$Private.$Event.show_mark",function () { markNode.className = "img-mark show"; }); vm.set("$Private.$Event.hide_mark",function () { markNode.className = "img-mark"; }); vm.set("$Private.$Event.remove",function () { _set_url(); }); }
    </script>
</xmp>

<!-- 商品图 -->
<!--  -->

<!-- 评论及回复 -->
<xmp type="tag" name="contentitem">
    <div class="contentitem">
        <div class="userimg">
            <img src="${userimg}" />
            <div class="name">${username}</div>
        </div>
        <div class="single">
            <div>▲</div>
        </div>
        <div class="contentbox">
            <div class="inneritem">
                心得：${text}
            </div>
            <div class="star-num">
                评价：${starnum}星
            </div>
            <div class="inneritem">
                <div class="time">时间：${time}</div>
                <div class="method">
                    <a>有用(${num1})</a>
                    <a name="reply">回复(${num2})</a>
                </div>
            </div>
            <div class="inputbox">
                <textarea class="inputtext" palceholder="请输入回复"></textarea>
                <a>提交</a>
                <a name="cancel">取消</a>
            </div>

            {{#each ${replyitem} }}
            <div class="replyitem">
                <div class="replytext">
                    {{replytext}}
                    <div class="time">
                        时间：{{replytime}}
                    </div>
                </div>
                <div class="single2">
                    <div>▲</div>
                </div>
                <div class="replyimg">
                    <img src='{{replyimg}}' />
                    <div class="name">士大夫士大夫dfs</div>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
    <script type="text/vm">
        function(vm){ var replybtn=vm.queryElement({ name:"reply" })[0]; var inputbox=vm.queryElement({ className:"inputbox" })[0] var cancelbtn=vm.queryElement({ name:"cancel" })[0] require(['jQuery'],function(){ $(replybtn).click(function(){ $(inputbox).addClass('focus'); }) $(cancelbtn).click(function(){ $(inputbox).removeClass('focus'); }) }) }
    </script>
</xmp>

<!-- 公告板 -->
<xmp type="tag" name="notice">
    <div class="notice">
        <div class="box">
            {{#each ${item} }}
            <div class="item"><a href="{{href}}" title="{{notice}}">{{notice}}</a>
            </div>
            {{/each}}
        </div>
    </div>
    <script type="text/vm">
        function(vm){ var noticebox=vm.queryElement({ className:"box" })[0]; require(['jQuery'],function(){ var len=$(noticebox).find('.item').length; var width=$(noticebox).css('width').split('p')[0]; console.log(width); if (len>1) { var i=0; var t=setInterval(function(){ $(noticebox).animate({ marginLeft: -(width*(i%len)) },800); i+=1; },3000) }; }) }
    </script>
</xmp>

<!-- 商品贴a类 -->
<xmp type="tag" name="goodstile_a">
    <div class="goodstile_a">
        <div class="goodsimg">
            <a target="_blank" href="${href}">
                <img src="${src}" />
            </a>
        </div>
        <div class="goodsinfo">
            <a target="_blank" href="${href}" title="${name}">
                <div class="infoitem name">${name}</div>
            </a>
            <div class="infoitem">销量：${num}</div>
            <div class="infoitem price">$${price}</div>
        </div>
    </div>
</xmp>

<!-- 分类标签 -->
<xmp type="tag" name="tilebox">
    <div class="tilebox">
        {{#each ${tile} }}
        <a target="_blank" href="{{href}}">
            <div title="{{tile}}" class="tileitem">
                {{tile}}
            </div>
        </a>
        {{/each}}
    </div>
</xmp>

<!-- 商品贴b类 -->
<xmp type="tag" name="goodstile_b">
    <div class="goodstile_b">
        <div class="goodsimg">
            <img src="${src}" />
            <div class="time" data="${time}">
                <div class="timeitem">
                    <div class="num"></div>
                    <div class="type">天</div>
                </div>
                <div class="timeitem">
                    <div class="num"></div>
                    <div class="type">小时</div>
                </div>
                <div class="timeitem">
                    <div class="num"></div>
                    <div class="type">分</div>
                </div>
                <div class="timeitem second">
                    <div class="num"></div>
                    <div class="type">秒</div>
                </div>
            </div>
        </div>
        <div class="goodsinfo">
            <div class="infoitem"><a target="_blank" class="name" href="">${name}</a>
            </div>
            <div class="infoitem">
                <span class="nowprice">$${nowprice}</span>
                <span class="oldprice">$${oldprice}</span>
            </div>
        </div>
    </div>
    <script type="text/vm">
        function(vm){ var timebox=vm.queryElement({ className:'time' })[0]; console.log(timebox); require(['jQuery'],function(){ var time=$(timebox).attr('data'); var boxs=$(timebox).find('.num'); var t=new Date(); var s=(time-t)/1000; var timer=setInterval(function(){ _d=parseInt(s/3600/24); _h=parseInt((s/3600)%24); _m=parseInt((s/60)%60); _s=parseInt(s%60); day=0; hour=0; minute=0; if(_h
        <10){ hour='0' +_h; }else{ hour=_h; }; if(_d<10){ day='0' +_d; }else{ day=_d; }; if(_d<10){ minute='0' +_m; }else{ minute=_m; }; $($(boxs)[0]).html(day); $($(boxs)[1]).html(hour); $($(boxs)[2]).html(minute); $($(boxs)[3]).html(_s); s-=1; },1000); }) } </script>
</xmp>


<!-- 商品贴c类 -->
<xmp type="tag" name="goodstile_c">
    <div class="goodstile_c">
        <div class="inner">
            <div class="goodsimg">
                <a target="_blank" href="${href}"><img src="${src}" /></a>
            </div>
            <div class="infobox">
                <div class="infoitem"><a target="_blank" href="${href}" class="name">${name}</a></div>
                <div class="infoitem">
                    <span class="price">$${price}</span>
                </div>
            </div>
            <div class="btnbox">
                <div class="itemcart"><button class="icon-cart">添加到购物车</button></div>
                <div class="itemfile"><button class="icon-star">添加到收藏</button></div>
            </div>
        </div>
    </div>  
</xmp>

